<template>
  <div class>
    <div class="card tr mb2"></div>

    <el-table ref="dragTable" row-key="id" :data="dataList" border style="width: 100%">
      <el-table-column type="index" width="60px" fixed="left" align="center" label="序号"></el-table-column>
      <el-table-column
        v-for="(item,index) in allItemList"
        :key="index"
        :label="item.name"
        v-if="item.show"
      >
        <template slot-scope="scope">
          <template v-if="!item.formatter">{{ scope.row[item.key] }}</template>
          <template v-else>
            <span v-text="item.formatter(scope.row, item)"></span>
          </template>
        </template>
      </el-table-column>

      <el-table-column width="250px" label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showTask(scope.row)">操作</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="card" style="text-align:right;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog title="处理任务" :visible.sync="taskFormVisiable" width="90%" >
      <div style="height:600px;" class="scrollbar">
        <task-form :taskId="taskId" :instanceId="instanceId" @dealTask="dealTask" @cancel="cancel"></task-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/* eslint-disable */
import { getList, taskDeal } from "./function";
import TaskForm from "../form/taskForm/index";
const defaultFormColumn = [
  {
    name: "任务ID",
    key: "taskId",
    align: "center",
    show: true
  },
  {
    name: "流程名称",
    key: "fdName",
    align: "center",
    show: true
  },
  {
    name: "任务key",
    key: "taskDefinitionKey",
    align: "center",
    show: true
  },
  {
    name: "任务名称",
    key: "taskName",
    align: "center",
    render: (h, params) => {
      return h("div", params.row.taskName);
    },
    show: true
  },
  {
    name: "流程ID",
    key: "fdId",
    align: "center",
    show: true
  },
  {
    name: "实例ID",
    key: "instanceId",
    align: "center",
    show: true
  }
];

export default {
  components: {
    TaskForm
  },
  data() {
    return {
      taskId: 0,
      instanceId: 0,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      taskFormVisiable: false,
      allItemList: defaultFormColumn,
      dataList: [],
      taskParamList: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      getList(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.dataList = res.retBody;
          this.total = res.retBody.total;
          this.currentPage = res.retBody.pageNum;
        }
      });
    },

    showTask(row) {
      this.taskFormVisiable = true;
      this.taskId = row.taskId;
      this.instanceId = row.instanceId;
      /**
      this.flowParamsItem.fdId = row.fdId;
      this.flowParamsItem.taskId = row.taskId;
      this.flowParamsItem.taskKey = row.taskDefinitionKey;
      this.flowParamsItem.handleUser = localStorage.getItem("username")=='undefined'?"":localStorage.getItem("username"),
      this.flowParamsItem.handleUserName = localStorage.getItem("realName")=='undefined'?"":localStorage.getItem("realName"),
      */
    },

    /**
     * 任务处理
     */
    dealTask(flowParamsItem) {
      /**
      let parentObj = window.top.document;
      this.text = 'value:' + parentObj.documentElement.innerHTML; 
      window.parent.showMyModal();
      window.parent.printAcceptanceForm('{"business_id":"xxxx"}');
      const self = this;
      console.log(this.flowParamsItem);
       */

      let param = {
        taskId: this.taskId
      };

      taskDeal(flowParamsItem).then(res => {
        if (res.retHead.code == "0000000") {
          this.$message({
            message: "操作成功！",
            type: "success"
          });
          this.taskFormVisiable = false;
          this.initData();
        } else {
          this.$message({
            message: "操作失败！",
            type: "error"
          });
        }
      });
    },
    cancel() {
      this.taskFormVisiable = false;
    },
    deleteCancel() {},

    sizeChange(n) {
      this.pageSize = n;
      this.initData();
    },
    currentChange(n) {
      this.currentPage = n;
      this.initData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang='scss' scoped>
/deep/ .scrollbar {
  white-space: nowrap; //强制一行显示（看需要）
  .el-scrollbar {
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
  }
  /deep/ .el-scrollbar__wrap {
    overflow: scroll;
    width: 100%; //隐藏侧边默认滚动条 （达不到效果可以自己试着微调） 如解决不了可尝试用 `margin-right -60px`
    height: 90%; //隐藏底部滚动条  （100%如果达不到效果可以试着用110%）
  }
}
</style>